<script setup>
import { onMounted, ref, shallowRef, provide, defineAsyncComponent, defineComponent, h, computed, watch, reactive, getCurrentInstance, toValue, toRaw } from 'vue'
import {createMenuCore} from './util/menuUtil.js'
import MenuView from './util/MenuView.vue'
//引入图标组件
import {IconSimpleLineGrid,IconBagAlt,IconCart,IconNoteAlt,IconUser,IconHomeAlt,IconSearchAlt,IconCarShipping,IconWalletAlt,IconCheckCircle} from './icon/index.js'
//消息提示工具
import {DlMessageBox} from './util/messagebox.js'

let i = 0;
function doDlMessageBox() {
    const mb = DlMessageBox({
        message: 'hello ==> '+(i++),
        duration: 3000,
        type: 'success',
    });
    DlMessageBox.warning({message: 'aaaa'+i, duration: 3000});
}
function doCloseMessageBox(){
    DlMessageBox.clearMessageBox();
}

function doUserAgent() {//判断客户端类型,限制宽度
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
    let isMobile = /android|avantgo|blackberry|iemobile|ipad|iphone|ipod|opera mini|opera mobi|palm|pocket|psp|series(4|6)0|symbian|windows ce|windows phone|xda|xiino/i.test(userAgent);
    console.log('userAgent is mobile:', isMobile);
    if(!isMobile) {
        //限制最大宽度
        const app = document.body.querySelector('#app');
        //app.style.maxWidth = "540px";//flexible.js
    }
}

onMounted(()=>{
    doUserAgent();
    menuCore.watchHashChange();//监听浏览器的回退/前进
    doGetLoginUser();//获取本地缓存的登录用户信息
});

const menuArr = [
    //底部菜单放前面, 其他放后面
    {path: '/home', name: '主页', component: defineAsyncComponent(()=>import('./views/HomeView.vue')), menuShow: true, icon: IconHomeAlt},
    {path: '/type', name: '分类', component: defineAsyncComponent(()=>import('./views/TypeListView.vue')), menuShow: true, icon: IconSimpleLineGrid},
    {path: '/cart', name: '购物车', component: defineAsyncComponent(()=>import('./views/CartView.vue')), menuShow: false, icon: IconCart},
    {path: '/order', name: '订单', component: defineAsyncComponent(()=>import('./views/OrderListView.vue')), menuShow: true, icon: IconNoteAlt},
    {path: '/user', name: '我的', component: defineAsyncComponent(()=>import('./views/UserView.vue')), menuShow: true, icon: IconUser},

    {path: '/login', name: '登录', component: defineAsyncComponent(()=>import('./views/LoginView.vue')), menuShow: false, icon: IconUser},
    {path: '/register', name: '注册', component: defineAsyncComponent(()=>import('./views/RegisterView.vue')), menuShow: false, icon: IconUser},
    {path: '/userinfo', name: '个人资料', component: defineAsyncComponent(()=>import('./views/UserInfoModifyView.vue')), menuShow: false, icon: IconUser},
    {path: '/useraddr', name: '收货地址', component: defineAsyncComponent(()=>import('./views/UserAddressView.vue')), menuShow: false, icon: IconCarShipping},
    {path: '/search', name: '搜索', component: defineAsyncComponent(()=>import('./views/SearchListView.vue')), menuShow: false, icon: IconSearchAlt},
    {path: '/detail', name: '商品详情', component: defineAsyncComponent(()=>import('./views/ProductDetailView.vue')), menuShow: false, icon: IconNoteAlt},

    {path: '/pay', name: '订单支付', component: defineAsyncComponent(()=>import('./views/OrderPayView.vue')), menuShow: false, icon: IconWalletAlt},
    {path: '/comment', name: '评价', component: defineAsyncComponent(()=>import('./views/OrderCommentView.vue')), menuShow: false, icon: IconCheckCircle},
    {path: '/miaosha', name: '限时秒杀', component: defineAsyncComponent(()=>import('./views/MiaoShaView.vue')), menuShow: false, icon: IconBagAlt},

    //测试
    {path: '/test', name: '测试', component: defineAsyncComponent(()=>import('./components/HelloWorld.vue')), menuShow: true, icon: IconHomeAlt},
];
//创建应用菜单核心
const menuCore = reactive(createMenuCore(menuArr, true));

function doChangeMenu(m) {
    // console.log('m:', m);
    menuCore.push(m.path);//切换页面
    //menuCore.back();//回退一个页面
}

//菜单核心
provide('menuCore', menuCore);

//底部菜单处理
const menuBars = [];
const currentMenuPath = ref();
// 取部分作为底部菜单
for(let i=0;i<5;i++) {
    menuBars.push(menuArr[i]);
}
//监听菜单,处理菜单的选中
watch(()=>menuCore.currentPath, (nv, ov)=>{
    let arr = menuBars.filter((bar)=>{
        if(bar.path == nv) {
            return bar;
        }
    });
    if(arr.length > 0) {
        currentMenuPath.value = arr[0].path;
    }
    //console.log('currentMenuPath.value:', currentMenuPath.value);
},{ immediate: true });

const homeMenuBar = ref(null);
provide('homeMenuBar', homeMenuBar);

function doTest() {
    menuCore.back();
}

//缓存登录的用户
const loginUser = ref({});
provide('loginUser', loginUser);
function doGetLoginUser() {
    //登录后缓存到本地的
    let str = localStorage.getItem("loginUser");
    try {
        let user = JSON.parse(str);
        console.log('loginUser:', user);
        if(user) {
            //模拟数据
            //user = {id:1, nickname:'汤姆', headImage: './user_default.jpg', phone: '1234567890', loginName: 'tom', token: 't123'};
            //成功后执行以下操作
            if(user.token) {
                loginUser.value = user;
            }
        }
    } catch (err) {
        //按未登录处理
        // console.log(err);
    }
}

//初始化购物车,key为productId
const cart = reactive({});
provide('cart', cart);
//搜索关键字
const searchKey = ref('');
provide('searchKey', searchKey);

</script>

<template>
<!-- 核心显示区域 -->
<MenuView :menu-core="menuCore"></MenuView>

<!-- 底部菜单 -->
<ul class="menu-bar-dl" ref="homeMenuBar" v-if="menuCore.menuShow">
    <template v-for="m in menuBars" :key="m.name" >
        <li class="menu-item-dl" :class="(m.path == currentMenuPath ? 'menu-item-active-dl':'')" @click="doChangeMenu(m)" >
            <div class="menu-item-icon-dl" ><component :is="m.icon"/></div>
            <div class="menu-item-title-dl">{{m.name}}</div>
        </li>
    </template>
</ul>

</template>

<style scoped>
.menu-bar-dl {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-evenly;
    height: 1.2rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0;
}
.menu-item-dl {
    display: inline-block;
    background-color: #87cefa;
    flex: 1 1 auto;
    text-align: center;
    cursor: pointer;
    color: #333;
    font-weight: bold;
    padding: 0.1rem 0;
}
/* .menu-item-dl:hover {
    background-color: #3eb5ff;
    color: #fff;
} */
.menu-item-icon-dl {
    display: inline-block;
    width: 0.72rem;
    transition: transform 0.2s linear;
}
.menu-item-title-dl {
    font-size: .28rem;
}

.menu-item-active-dl {
    background-color: #3eb5ff;
    color: #fff;
    
}
.menu-item-active-dl .menu-item-icon-dl {
    transform: translateY(-0.1rem) scale(1.1);
}
</style>
